<template>
    <div class="template-index-Lu">
        <commpVxeTable
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button class="blue-btn" @click="reviseClick(row)">办理</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <applicationForm ref="applicationFormRef" :linkName="linkName" :formData="formData" @success="success"></applicationForm>
    </div>
</template>
<script>
import  assessCheckApi  from './service/api.js'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  applicationForm  from '../index/applicationForm.vue'
import  moment  from 'moment'
export default {
    components: {
        commpVxeTable,
        applicationForm,
    },
    props:{
        linkName:{
            type:String,
            default:'',
            required:false,
        },
        stepNum:{
            type:String,
            default:'',
            required:false,
        }
    },
    data() {
        return {
            moment,
            stepNums: 0,
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.list,
                rowId: 'id',
                urlType: true,
                paramet: {
                    fhjmc: this.linkName,
                }
            },
            columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '拟办人',
          field: 'fnbr',
          width: 100,
        },{
          title: '拟办时间',
          field: 'fnbsj',
          width: 150,
        },{
          title: '日期',
          field: 'frq',
          width: 150,
        },{
          title: '自然编号',
          field: 'fzrbh',
        },{
          title: '事项',
          field: 'fsx',
        },{
          title: '类别',
          field: 'flb',
          width: 100,
        },
        // {
        //   title: '发送人',
        //   field: 'ffsrmc',
        //   width: 100,
        // },
        {
          title: '退回意见',
          field: 'fthyj',
        },{
          title: '操作',
          field: 'jobid',
          width: 200,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '类别',
          model: 'flb',
          placeholder: '类别',
          type:'Select',
          dictionaryType:'OA行政事务审批类别'
        }
      ],
            jobidList: [],
            checkList: [],
            formData: {},
            opinion: '',
            reJobid: '',
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.jobidList = []
            this.checkList = []
            this.checkList = val
            if(val.length){
                val.forEach(item => {
                    this.jobidList.push(item.jobid)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
            //console.log(this.dataTableConfig.paramet)
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 点击办理
        reviseClick(row){
            //console.log('办理',row)
            this.formData = {
                ...row
            }
            // let jobid = row.jobid
            // queryJobByJobId({jobid:jobid}).then(res => {
            //     //console.log(res)
            // })
            this.formData.id = row.oaid
            this.$nextTick(_ => {
                this.$refs.applicationFormRef.applicationFormVisible = true
            })
        },
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.resetEvent()
            this.jobidList = []
        },
    },
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>
